<template>
  <div id="app" class="sidebar-mini wysihtml5-supported skin-blue">
    <header class="main-header">
      <!-- Logo -->
      <a class="logo">
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini"><b>A</b>LT</span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg"><b>业务管理</b>系统</span>
      </a>
      <!-- Header Navbar: style can be found in header.less -->
      <nav class="navbar navbar-static-top">
        <!-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="push-menu" @click="close">
          <span class="sr-only">Toggle navigation</span>
        </a>

        <div class="navbar-custom-menu">
          <ul class="nav navbar-nav">
            <!-- Messages: style can be found in dropdown.less-->
            <li class="dropdown messages-menu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-envelope-o"></i>
                <span class="label label-success">4</span>
              </a>
            </li>
            <!-- Notifications: style can be found in dropdown.less -->
            <li class="dropdown notifications-menu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-bell-o"></i>
                <span class="label label-warning">10</span>
              </a>
            </li>
            <!-- Tasks: style can be found in dropdown.less -->
            <li class="dropdown tasks-menu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <i class="fa fa-flag-o"></i>
                <span class="label label-danger">9</span>
              </a>
            </li>
            <!-- User Account: style can be found in dropdown.less -->
            <li class="dropdown user user-menu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <img src="./assets/img/avatar5.png" class="user-image" alt="User Image">
                <span class="hidden-xs">乌兰察布市</span>
              </a>
            </li>
            <!-- Control Sidebar Toggle Button -->
            <li>
              <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
      <!-- sidebar: style can be found in sidebar.less -->
      <section class="sidebar">
        <div class="user-panel">
          <div class="pull-left image">
            <img src="./assets/img/avatar5.png" class="img-circle" alt="User Image">
          </div>
          <div class="pull-left info">
            <p>乌兰察布市</p>
            <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
          </div>
        </div>
        <form action="#" class="sidebar-form">
          <div class="input-group" style="display: table;">
            <input name="q" class="form-control" placeholder="输入关键字查询">
            <span class="input-group-btn">
                <button name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
          </div>
        </form>
        <!-- search form -->
        <!-- sidebar menu: : style can be found in sidebar.less -->
        <ul class="sidebar-menu" data-widget="tree">
          <li class="active treeview">
            <a>
              <i class="fa fa-th"></i> <span><router-link to="/hello">首页</router-link></span>
              <span class="pull-right-container">
            </span>
            </a>
          </li>
          <!--扶贫对象-->
          <li class="treeview">
            <a>
              <i class="fa fa-edit"></i> <span>扶贫对象</span>
              <span class="pull-right-container">
              <span class="label label-primary pull-right">4</span>
            </span>
            </a>
            <ul class="treeview-menu">
              <li><a><i class="fa fa-circle-o"></i> 贫困县</a></li>
              <li><a><i class="fa fa-circle-o"></i> 贫困村</a></li>
              <li><a><i class="fa fa-circle-o"></i> 贫困户</a></li>
              <li><a><i class="fa fa-circle-o"></i> 贫困人口</a></li>
            </ul>
          </li>
          <!--扶贫主体-->
          <li class="treeview">
            <a>
              <i class="fa fa-table"></i> <span>扶贫主体</span>
              <span class="pull-right-container">
              <span class="label label-primary pull-right">3</span>
            </span>
            </a>
            <ul class="treeview-menu">
              <li><a><i class="fa fa-circle-o"></i> 帮扶单位</a></li>
              <li><a><i class="fa fa-circle-o"></i> 帮扶干部</a></li>
              <li><a><i class="fa fa-circle-o"></i> 驻村工作队</a></li>
            </ul>
          </li>
          <!--扶贫项目-->
          <li class="treeview">
            <a>
              <i class="fa fa-envelope"></i> <span>项目资金</span>
              <span class="pull-right-container">
              <span class="label label-primary pull-right">4</span>
            </span>
            </a>

            <ul class="treeview-menu">
              <li><a><i class="fa fa-circle-o"></i> 项目库建设</a></li>
              <li><a><i class="fa fa-circle-o"></i> 十项重点扶贫工程</a></li>
              <li><a><i class="fa fa-circle-o"></i> 资金下达</a></li>
              <li><a><i class="fa fa-circle-o"></i> 资金安排</a></li>
            </ul>
          </li>
          <!--扶贫成效-->
          <li class="treeview">
            <a>
              <i class="fa fa-signal"></i> <span>扶贫成效</span>
              <span class="pull-right-container">
              <span class="label label-primary pull-right">3</span>
            </span>
            </a>

            <ul class="treeview-menu">
              <li><a><i class="fa fa-circle-o"></i>扶持措施表</a></li>
              <li><a><i class="fa fa-circle-o"></i>受益项目表</a></li>
              <li><a><i class="fa fa-circle-o"></i>项目监测表</a></li>
            </ul>
          </li>
          <!--大数据比对-->
          <li class="treeview">
            <a>
              <i class="fa fa-pie-chart"></i> <span><router-link to="/data">大数据比对</router-link></span>
            </a>
          </li>

          <!--预脱贫名单-->
          <li class="treeview">
            <a>
              <i class="fa fa-dashboard"></i> <span>预脱贫名单</span>
            </a>
          </li>
          <!--脱贫追溯-->
            <li class="treeview">
                <a>
                  <i class="fa fa-folder"></i><span><router-link to="/data"> 脱贫追溯</router-link></span>
                </a>
            </li>
        </ul>
      </section>
      <!-- /.sidebar -->
    </aside>
    <aside class="control-sidebar control-sidebar-dark">
      <!-- Create the tabs -->
      <!-- Tab panes -->
      <div class="tab-content">
        <!-- Home tab content -->

        <div id="control-sidebar-theme-demo-options-tab" class="tab-pane active">
        <div>
          <ul class="list-unstyled clearfix">
            <li style="float:left; width: 33.33333%; padding: 5px;">
              <a href="javascript:void(0)" data-skin="skin-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                <div>
                  <span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9"></span>
                  <span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span>
                </div>
                <div>
                  <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32"></span>
                  <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                </div>
              </a>
              <p class="text-center no-margin">Blue</p>
            </li>
            <li style="float:left; width: 33.33333%; padding: 5px;">
            <a href="javascript:void(0)" data-skin="skin-black" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
              <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">
                <span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe"></span>
                <span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe"></span>
              </div>
              <div>
                <span style="display:block; width: 20%; float: left; height: 20px; background: #222"></span>
                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
              </div>
            </a>
              <p class="text-center no-margin">Black</p>
            </li><li style="float:left; width: 33.33333%; padding: 5px;">
            <a href="javascript:void(0)" data-skin="skin-purple" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
              <div>
                <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span>
                <span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span>
              </div><div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32">
            </span>
              <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
            </div></a><p class="text-center no-margin">Purple</p></li><li style="float:left; width: 33.33333%; padding: 5px;">
            <a href="javascript:void(0)" data-skin="skin-green" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
              <div>
                <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span>
                <span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span>
              </div>
              <div>
                <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32"></span>
                <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
              </div></a><p class="text-center no-margin">Green</p>
          </li>
            <li style="float:left; width: 33.33333%; padding: 5px;">
              <a href="javascript:void(0)" data-skin="skin-red" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                <div>
                  <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span>
                  <span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span>
                </div>
                <div>
                  <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32"></span>
                  <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                </div>
              </a>
              <p class="text-center no-margin">Red</p>
            </li>
            <li style="float:left; width: 33.33333%; padding: 5px;">
              <a href="javascript:void(0)" data-skin="skin-yellow" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                <div>
                  <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span>
                  <span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span>
                </div>
                <div>
                  <span style="display:block; width: 20%; float: left; height: 20px; background: #222d32"></span>
                  <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                </div>
              </a>
              <p class="text-center no-margin">Yellow</p>
            </li>
            <li style="float:left; width: 33.33333%; padding: 5px;">
              <a href="javascript:void(0)" data-skin="skin-blue-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                <div>
                  <span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9"></span>
                  <span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span>
                </div>
                <div>
                  <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc"></span>
                  <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                </div></a><p class="text-center no-margin" style="font-size: 12px">Blue Light</p>
            </li>
            <li style="float:left; width: 33.33333%; padding: 5px;">
              <a href="javascript:void(0)" data-skin="skin-black-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">
                  <span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe"></span>
                  <span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe"></span>
                </div>
                <div>
                  <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc"></span>
                  <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                </div>
              </a>
              <p class="text-center no-margin" style="font-size: 12px">Black Light</p>
            </li>
            <li style="float:left; width: 33.33333%; padding: 5px;">
              <a href="javascript:void(0)" data-skin="skin-purple-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                <div>
                  <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span>
                  <span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span>
                </div>
                <div>
                  <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc"></span>
                  <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                </div>
              </a>
              <p class="text-center no-margin" style="font-size: 12px">Purple Light</p>
            </li>
            <li style="float:left; width: 33.33333%; padding: 5px;">
              <a href="javascript:void(0)" data-skin="skin-green-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                <div>
                  <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span>
                  <span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span>
                </div>
                <div>
                  <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc"></span>
                  <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                </div>
              </a>
              <p class="text-center no-margin" style="font-size: 12px">Green Light</p>
            </li>
            <li style="float:left; width: 33.33333%; padding: 5px;">
              <a href="javascript:void(0)" data-skin="skin-red-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                <div>
                  <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span>
                  <span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span>
                </div>
                <div>
                  <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc"></span>
                  <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                </div>
              </a>
              <p class="text-center no-margin" style="font-size: 12px">Red Light</p>
            </li>
            <li style="float:left; width: 33.33333%; padding: 5px;">
              <a href="javascript:void(0)" data-skin="skin-yellow-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
                <div>
                  <span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span>
                  <span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span>
                </div>
                <div>
                  <span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc"></span>
                  <span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7"></span>
                </div>
              </a>
              <p class="text-center no-margin" style="font-size: 12px">Yellow Light</p>
            </li>
          </ul>
        </div>
        </div>
        <!-- /.tab-pane -->
        <!-- Stats tab content -->

        <!-- /.tab-pane -->
        <!-- Settings tab content -->
        <!-- /.tab-pane -->
      </div>
    </aside>
    <div class="control-sidebar-bg"></div>
    <div class="content-wrapper">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      close:function () {
        $('#app').toggleClass('sidebar-collapse');
      }
    }
  }
</script>

<style>
body{
  padding:0;
  margin:0;
}
#app{
  height:100%;
}
.content-wrapper{
  height:100%;
}
  i{
    width:22px;
  }
</style>
